class Enlarge
{
    constructor(el,opations ={}){
        this.el = document.querySelector(el)
        this.imgObj = this.el.querySelector('.img')
        this.maskObj = this.el.querySelector('.mask')
        this.enlarge = this.el.querySelector('.enlarge')
        this.opations = opations
        this.init()
    }
    init()
    {
        //移入移出事件
        this.overout()
        //获取非行内样式
        //等比放大
        this.sanmebig()
        //移动事件
        this.moveevent()
        //点击小图事件
        this.onclickevent()
        //自定义样式
        this.selfStyle()
    }
    selfStyle()
    {
        this.maskObj.style.backgroundColor = this.opations.color
    }
    overout()
    {
        this.imgObj.onmouseover = ()=>{
            this.maskObj.style.display = this.enlarge.style.display= 'block'
        }
        this.imgObj.onmouseout = ()=>{
            this.maskObj.style.display= this.enlarge.style.display = 'none'
        }
    }
    getstyle(tagObj,cssAttr)
    {
        // ()里面是标签对象 []是属性名
        // return Window.getComputedStyle ? Window.getComputedStyle(bq)[sxm] : bq.currentStyle[sxm]
        // return Window.getComputedStyle(bq)[sxm]
        // console.log(window.getComputedStyle(this.imgObj)[background]);
         
        return window.getComputedStyle ? window.getComputedStyle(tagObj)[cssAttr] : tagObj.currentStyle[cssAttr]
    }
    sanmebig()
    {
        //获取遮罩框的宽高
        let maskwidth = this.getstyle(this.maskObj,'width')
        let maskHeight = this.getstyle(this.maskObj,'height')
        //获取img的宽高
        let imgwidth = this.getstyle(this.imgObj,'width')
        let imgHeight = this.getstyle(this.imgObj,'height')
        //获取enlarge的宽高
        let enlargexy = this.getstyle(this.enlarge,'background-size')
        let arr = enlargexy.split(' ')
        let enlargex =parseInt(arr[0]) 
        let enlargey =parseInt(arr[1]) 
        let x = parseInt(maskwidth) * (enlargex/parseInt(imgwidth))
        let y = parseInt(maskHeight) * (imgHeight/parseInt(enlargey))
        this.enlarge.style.width = x +'px'
        this.enlarge.style.height = y+'px'
    }
    moveevent()
    {
        //获取图片并绑定移动事件
        this.imgObj.onmousemove = (evt)=>{
            let e = evt || window.event
            let leftx = e.pageX - this.el.offsetLeft - this.maskObj.offsetWidth/2
            let righty = e.pageY - this.el.offsetTop - this.maskObj.offsetHeight/2
            if(leftx<0) leftx = 0
            if(righty<0) righty = 0
            let maxwidth = this.imgObj.clientWidth - this.maskObj.offsetWidth
            let maxHeight = this.imgObj.clientHeight - this.maskObj.offsetHeight
            if(leftx>maxwidth) leftx = maxwidth
            if(righty>maxHeight) righty = maxHeight
            this.maskObj.style.left = leftx +'px'
            this.maskObj.style.top = righty +'px'
            //同步放大镜
            //获取img的宽高
            let imgwidth = this.getstyle(this.imgObj,'width')
            let imgHeight = this.getstyle(this.imgObj,'height')
            //获取enlarge的宽高
            let enlargexy = this.getstyle(this.enlarge,'background-size')
            let arr = enlargexy.split(' ')
            let enlargex =parseInt(arr[0]) 
            let enlargey =parseInt(arr[1])
            let m = enlargex/parseInt(imgwidth)
            let n = enlargey/parseInt(imgHeight)
            console.log(m);
            
            this.enlarge.style.backgroundPosition = `${-leftx *m }px ${-righty * n}px` 
        }

    }
    onclickevent()
    {
        let liObj = this.el.querySelectorAll('ul li')
        liObj.forEach((item,i) => {
            item.onclick = ()=>{
                this.el.querySelector('ul li.active').className = ''
                item.className = 'active'
                // 获取当前盒模型的img图片地址
                this.imgObj.style.backgroundImage = `url(./imgs/${i+1}.jpg)`
                this.enlarge.style.backgroundImage = `url(./imgs/${i+1}.big.jpg)`
            }
        });
    }
}